/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Image,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

import Screen from './HomeScreen.js'

export default class HomeDetailView extends Component {
  static navigationOptions = ({navigation}) => ({
    headerLeft: (
      <TouchableOpacity
        onPress = {() => navigation.goBack()}
      >
        <Image
          style = {{width:24, height:24, marginLeft:10}}
          source = {require('../../img/homeImg/back.png')}
        />
      </TouchableOpacity>
    ),
    headerRight: (
      <TouchableOpacity
        //  onPress = {() => this.props.navigation.goBack()}
      >
        <Image
          style = {{width:17, height:17,marginRight:10}}
          source = {require('../../img/homeImg/littlePlaying1.png')}
        />
      </TouchableOpacity>
    ),

    headerTitle:navigation.state.params.info.name,
    headerTitleStyle:{color:'black'},
    headerStyle:{ backgroundColor: 'white' }
  })

  constructor(props){
  	super(props);

    let urlID = this.props.navigation.state.params.info.id;

    let totalUrl = '';

    console.log(urlID);

    if (urlID.startsWith('http://')) {//urlID.substring(0,7)==='http://'
      totalUrl = urlID;
    }else {
      totalUrl = 'http://yiapi.xinli001.com/fm/category-jiemu-list.json?key=c0d28ec0954084b4426223366293d190&offset=0&category_id='+ urlID +'&limit=20'
    }
  	this.state = {
      flatListData:[],
      url:totalUrl,
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  //取数据
  fetchData(){
    // let requestUrl = this.state.url;
    let requestUrl = this.state.url;
    let map = {
      method:'GET'
    }
    fetch(requestUrl, map)
      .then((response) => response.json())
      .then((responseData) => {
      //  console.log(responseData);
        let jsonData = responseData.data;
        //console.log(jsonData);
        console.log(jsonData.length);
        this.setState({
          flatListData:jsonData,
        })
      })
      .catch((error) => {
        console.log(error);
        alert('失败');
      })
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          keyExtractor={this._keyExtractor}
          renderItem = {this._flatListRenderItem}
          // data={this.state.flatListData.length>0?this.state.flatListData:[]}
          data={this.state.flatListData}
          style = {{backgroundColor:'#ffffff'}}
          // numColumns ={4}
          ItemSeparatorComponent = {this._itemSeparatorComponent}
        />
      </View>
    );
  }
  _flatListRenderItem = ({item}) => {
    console.log(item);
    return(
      <View style = {styles.cellStyle}>
        <Image
          style = {styles.imageStyle}
          source = {{uri:item.cover}}
        />
        <View style = {styles.rightViewStyle}>
          <Text style = {styles.titleStyle}>
            {item.title}
          </Text>
          <Text style = {styles.contentStyle}>
            {'主播  ' + item.speak}
          </Text>
          <Text style = {styles.contentStyle}>
            {'收听量  ' + item.viewnum}
          </Text>
        </View>
      </View>
    );
  }

  _itemSeparatorComponent = () => {
    return(
      <View style = {{backgroundColor:'rgb(245,245,245)', marginHorizontal:7, height:1}}>

      </View>
    );
  }

  _keyExtractor = (item, index) => {
    return item.id;
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'#ffffff',
    height:Screen.height,
  },
  cellStyle: {
    width:Screen.width,
    height:70,
    flexDirection:'row',
    //marginTop:10,
    alignItems:'center',
  },
  imageStyle: {
    width:50,
    height:50,
    marginLeft:7,
    alignItems:'center'
  },
  rightViewStyle: {
    marginLeft:10,
  },
  titleStyle: {
    color:'rgb(99,99,99)'
  },
  contentStyle: {
    color:'rgb(140,140,140)'
  }
});
